<template>
	<view class="container margin-lr">
		<view class="border-radius margin-top-sm">
			<!-- <use-list-title title="个人资料" iconfont=" " @goto="to('/pages/user/setting/personal')"></use-list-title> -->
			<use-list-title title="账户名" iconfont=" " :tip="userInfo.name" @goto="editShow=true"></use-list-title>
			<use-list-title title="手机号" iconfont=" " :tip="userInfo.account"></use-list-title>
			<!-- <use-list-title title="实名认证" iconfont=" " @goto="toRealname" :tip="userInfo.znAuthenticationed=='true'?'已认证':'未认证'"></use-list-title>
			
			<use-list-title title="安全密码" iconfont=" " @goto="toPayPassWord" :tip="userInfo.znFundPasswordSet=='true'?'已设置':'去设置'"></use-list-title>
			<use-list-title title="我的绑卡" iconfont=" " @goto="to('/pages/user/bank/bank')" :tip="userInfo.znIsBindCard?'已绑卡':'未绑卡'" ></use-list-title>
		-->	
		<use-list-title title="绑定微信" iconfont=" " @goto="toSign" :tip="userInfo.znSignContract?'已绑定':'未绑定'"></use-list-title>
		 
		</view>

		<view class="border-radius margin-top-sm">
			<use-list-title title="关于世华圣医" iconfont=" " @goto="to('/pages/user/setting/about')" :tip="version"></use-list-title>
		</view>
		<use-popup v-model="editShow" bgclass=" " mode="top" borderRadius="20">
			<view class="oper-area border-radius bg-main">
				<view class="dflex-b ft-dark fs-xs margin-bottom-sm margin-lr-xs">
					<view>修改用户名称</view>
				</view>
				<view class="dflex border-radius-sm field" style="padding: 18rpx 16rpx">
					<textarea class="fwb fs-sm" type="text"
						v-model="nickName" auto-height disable-default-padding
						style="max-height: 160rpx; min-height: 40rpx; height: 40rpx; font: initial;"
						:show-confirm-bar="false" cursor-spacing="20" placeholder="请输入" placeholder-class="fs-sm"
						@confirm="editConfirm" />
				</view>

				<view class="bg-base margin-top-xl tac w-full border-radius-lg padding-tb-sm" @click.stop="editConfirm">
					提交
				</view>
			</view>
		</use-popup>
		<use-popup v-model="editShow1" bgclass=" " mode="top" borderRadius="20">
			<view class="oper-area border-radius bg-main">
				<view class="dflex-b ft-dark fs-xs  margin-lr-xs">
					<view>修改手机号</view>
				</view>
				<view class="dflex border-radius-sm field" style="padding: 18rpx 16rpx">
					<textarea class="fwb fs-sm" type="text"
						v-model="phoneNumber" auto-height disable-default-padding
						style="max-height: 160rpx; min-height: 40rpx; height: 40rpx; font: initial;"
						:show-confirm-bar="false" cursor-spacing="20" placeholder="请输入" placeholder-class="fs-sm"
						/>
				</view>
				<view class="dflex-b ft-dark fs-xs margin-top-sm margin-lr-xs">
					<view>验证码</view>
				</view>
				<view class="dflex border-radius-sm field" style="padding: 18rpx 16rpx">
					<textarea class="fwb fs-sm" type="text"
						v-model="code" auto-height disable-default-padding
						style="max-height: 160rpx; min-height: 40rpx; height: 40rpx; font: initial;"
						:show-confirm-bar="false" cursor-spacing="20" placeholder="请输入" placeholder-class="fs-sm"
						/>
					<view @click="getCode" style="flex-shrink: 1;flex-grow: 1;min-width: 75px;">{{getCodeText}}</view>
				</view>

				<view class="bg-base margin-top-xl tac w-full border-radius-lg padding-tb-sm" @click.stop="editConfirm1">
					提交
				</view>
			</view>
		</use-popup>
	</view>
</template>

<script>
	import {get_sign_contract,update_openid,sign_contract,modify_mobile_phone,send_customer_verify_code,update_nick_name } from "../../../js_sdk/apis/user.js"
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				signType: false,
				webviewStyles: {
					progress: {
						color: '#ff6a6c'
					}
				},
				editShow1:false,
				nickName:"",
				editShow:false,
				getCodeText:'获取验证码',
				phoneNumber:"",
				code:"",
				// 路径地址
				weburl: '',
				webShow:false
			};
		},
		computed: {
			userInfo(){
				return this.$store.state.user.userInfo
			},
			isLogin(){
				return this.$store.getters['user/hasLogin']
			},
			version() {
				return '版本1.0' ;
			}
		},
		onShow() {
			if (!this.isLogin) {
				this.$api.msg('账号未登录');
				return;
			}
		},
		methods: {
			editConfirm1(){
				modify_mobile_phone({mobilePhone:this.phoneNumber,verifyCode:this.code}).then(res=>{
					this.$store.dispatch('user/GetInfo')
					this.editShow1=false
					uni.showToast({
						icon:"none",
						title:"修改成功"
					})
				}).catch(e=>{
					console.log(e)
				})
			},
			getCode(){
				uni.hideKeyboard()
				if(this.getCodeisWaiting){
					return ;
				}
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))){ 
					uni.showToast({title: '请填写正确手机号码',icon:"none"});
					return false; 
				} 
				this.getCodeText = "发送中..."
				this.getCodeisWaiting = true;
				this.getCodeBtnColor = "rgba(255,255,255,0.5)"
				//示例用定时器模拟请求效果
				send_customer_verify_code({mobilePhone:this.phoneNumber}).then((res)=>{
					uni.showToast({title: '验证码已发送',icon:"none"});
					//示例默认1234，生产中请删除这一句。
					//his.code=1234;
					this.setTimer();
				})
			},
			setTimer(){
				let holdTime = 60;
				this.getCodeText = "重新获取(60)"
				this.Timer = setInterval(()=>{
					if(holdTime<=0){
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#ffffff";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer);
						return ;
					}
					this.getCodeText = "重新获取("+holdTime+")"
					holdTime--;
					
				},1000)
			},
			editConfirm(){
				update_nick_name({nickName:this.nickName}).then(res=>{
					this.$store.dispatch('user/GetInfo')
					this.editShow=false
					uni.showToast({
						icon:"none",
						title:"修改成功"
					})
				})
			},
			toSign(){
				if(this.userInfo.znSignContract){
					uni.showModal({
						title:"提示",
						content:"您已经绑定过了，确认重新绑定？",
						success: (res) => {
							if(res.confirm){
								this.bindWx()
							}
						}
					})
				}else{
					this.bindWx()
				}
			},
			bindWx(){
				uni.showLoading({
					title: "绑定中"
				})
				uni.login({
					provider: 'weixin'
				}).then(code => {
					console.log(code)
					// #ifdef APP-PLUS
					update_openid({openid:code[1].authResult.openid}).then(res=>{
						console.log(res)
						uni.hideLoading()
						uni.showToast({
							icon:"none",
							title:"绑定成功!"
						})
						this.$store.dispatch('user/GetInfo')
					})
					// #endif
					// #ifdef MP-WEIXIN
					this.$yunapi('user-center', 'loginByWeixin', {code}).then(res => {
						console.log(res)
						let openid=res.userInfo.wx_openid["mp-weixin"]
						update_openid({openid}).then(res=>{
							uni.hideLoading()
							uni.showToast({
								icon:"none",
								title:"绑定成功"
							})
							this.$store.dispatch('user/GetInfo')
						})
					})
					// #endif
					
				})
			},
			toPayPassWord(){
				uni.navigateTo({
					url:"modify-password"
				})
			},
			toRealname() {
				uni.navigateTo({
					url:"../real-name/real-name"
				})
			},
			to(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang='scss'>
	page {
		background: $page-color-base;
	}
.oper-area {
		width: 80vw;
		padding: 80rpx;
		margin-top: 20vh;
		margin-left: 10vw;

		.field {
			background-color: #f5f5f5;
		}
	}
	.use-item {
		height: 100rpx;
		line-height: 100rpx;
		position: relative;
		background: #fff;

		switch {
			transform: translateX(16rpx) scale(.84);
		}

		button {
			line-height: 100rpx;
			background: #fff;
			font-size: 15px;
		}
	}
</style>
